<!--
 * @Author: chenjianxin
 * @Date: 2020-09-09 09:33:42
 * @LastEditTime: 2020-10-26 14:35:41
 * @LastEditors: ganxiaochuan
 * @Description: 输入框组件
 * @FilePath: \ui-standard\src\components\AppInput.vue
-->
<template>
  <div class="app-input">
    <span v-if="prefixIcon" :class="['font_family', prefixIcon, isFocus ? 'iconColor' : '']"></span>
    <input @keyup.enter="$emit('enter')" autocomplete="new-password" :class="['input', ...className]" :type="inputType" :value="value" @input="onInput" @focus="isFocus = true" @blur="validate" />
    <span v-if="suffixIcon" :class="['font_family', isEye ? 'icon-xianshi iconColor' : suffixIcon]" @click="isEye = !isEye"></span>
    <i class="rulesLine" :class="{ active: validator }"></i>
  </div>
</template>
<script>
export default {
  props: {
    className: {
      default: ''
    },
    type: {
      default: 'text',
      type: String
    },
    value: {
      default: '',
      type: [String, Number]
    },
    prefixIcon: {
      default: ''
    },
    suffixIcon: {
      default: ''
    }
  },
  computed: {
    inputType () {
      return this.isEye ? 'text' : this.type
    }
  },
  data () {
    return {
      isFocus: false,
      isEye: false,
      validator: false
    }
  },
  methods: {
    onInput (e) {
      this.$emit('input', e.target.value)
      this.validator = !e.target.value
    },
    validate (e) {
      this.isFocus = false
      this.validator = !e.target.value
    }
  }
}
</script>
<style lang="scss" scoped>
.app-input {
  border-bottom: 1px solid #D9E0E7;
  display: flex;
  align-items: center;
  position: relative;
  .font_family {
    color: #9B9FBB;
    font-size: 20px;
  }
  .input {
    background: none;
    border: none;
    line-height: 28px;
    flex-grow: 1;
    color: #FFF;
    outline: none;
    padding-left: 5px;
  }
  .iconColor {
    color: #FFF;
  }
  .rulesLine {
    position: absolute;
    bottom: -1px;
    z-index: 1;
    width: 0;
    height: 1px;
    background: #f00;
    transition: width .2s linear;
    &.active {
      width: 100%;
    }
  }
}
</style>